D3js CSV呈現簡單COVID-19圖表

相關API

d3-dsv

d3-dsv就是用來處理常見的csv格式檔案的API，csv比json節省空間，很多資料來源API都會提供csv格式的資料。

d3-fetch

d3-fetch系列針對取得資料源，有提供各類型fetch的API，讓我們取得csv, blob, json非常方便。

d3.csv使用

d3.csv(資來源)即可送出一個http request並取得目標csv，範例使用武漢肺炎 COVID-19的確診資料。

資料來源: https://ourworldindata.org/coronavirus-source-data

const sourceUrl = `https://covid.ourworldindata.org/data/ecdc/total_cases.csv`;
d3.csv(sourceUrl).then(data => console.log('data', data))

耶！有資料了！

發現資料量太多了！我們只取近20天。

d3.csv(sourceUrl).then(data => {
  let datas = JSON.parse(JSON.stringify(data));
  // 以上步驟可以將CSV格式轉換為json格式。
  datas = datas.slice(datas.length - 20);
  // 只取最後近20天。
  paint(datas);
  // 畫出資料
})

劃出長條圖

const sourceUrl = `https://covid.ourworldindata.org/data/ecdc/total_cases.csv`;
// 這是資料來源的CSV
const width = 1920;
// 寬為1920
const height = 860;
// 高維860
const padding = 200;
// 內縮200 因為比例尺的數字會超出邊界，因此內縮保留給比例尺。
const svg = d3.select('svg').attr('width', width).attr('height', height);
const rootLayer = svg.append('g').attr('transform', `translate(${padding}, ${padding})`)
const axisLayer = rootLayer.append('g');
const xAisLayer = axisLayer.append('g').attr('transform', `translate(0, ${height - padding * 2})`);
const yAisLayer = axisLayer.append('g');
const dataLayer = rootLayer.append('g');
// 以上為設定基本圖層。


const paint = (dataset) => {
  let xExtent = d3.extent(dataset, data => new Date(data.date));
  // 取得時間最大嘴小，從資料來源找出。
  let yMax = d3.max(dataset, data => data.World);
  // 取出最大的數字，最小數字會使用0。
  let xScale = d3.scaleTime().range([0, width - padding * 2]).domain(xExtent);
  // 使用scaleTime產出時間對應的scale
  let yScale = d3.scaleLinear().range([height - padding * 2, 0]).domain([0, yMax]);
  // 使用scaleLinear產出感染者數量scale
  let xAxis = d3.axisBottom().scale(xScale).ticks(d3.utcDay).tickFormat(d3.timeFormat("%Y/%m/%d"))
  let yAxis = d3.axisLeft().scale(yScale);
  // 產生比例尺
  yAisLayer.call(yAxis);
  xAisLayer.call(xAxis);
  
  
  // 因為是靜態資料，並沒有甚麼特別互動，因此直接Enter即可。append並畫上rect。
  dataLayer.selectAll('rect')
           .data(dataset, data => data.date)
           .enter()
           .append('rect')
           .attr('x', data => xScale(new Date(data.date)))
           .attr('y', data => yScale(data.World))
           .attr('width', 10)
           .attr('height', data => height - yScale(data.World) - padding * 2)      
}

d3.csv(sourceUrl).then(data => {
  let datas = JSON.parse(JSON.stringify(data));
  datas = datas.slice(datas.length - 20);
  paint(datas);  
})

結論

d3其實還有提供很多csv, json相關的操作，目前範例只使用到fetch資料的部分。

參考

CSV資料來源
D3-csv